<template>
  <div>
    <a-card :bordered="false">
      <f-search-form :more="true" @searchHandler="searchHandler">
        <f-search-form-item label="专业包代码" name="majorCode" slot="advanced" />
        <f-search-form-item label="专业包名称" name="majorName"/>
        <f-search-form-item label="工程包代码" name="packageNo" slot="advanced" />
        <f-search-form-item label="工程包名称" name="packageName"/>
        <!--        <f-search-form-item label="物料WBS&#45;&#45;无此字段" name="packageNo"/>-->
        <!--        <f-search-form-item label="物料代码&#45;&#45;无此字段" name="packageNo"/>-->
        <f-search-form-item label="服务WBS" name="serviceWbsCode" slot="advanced" />
        <f-search-form-item label="服务代码" name="serviceCode" slot="advanced" />
        <f-search-form-item label="项目（名称）" name="materiaSpecs" slot="advanced" />
        <!--        <f-search-form-item label="设备材料名称&#45;&#45;无此字段" name="packageNo"/>-->
        <f-search-form-item label="层级号" name="层级号" slot="advanced" />
        <f-search-form-item label="科目名称" name="subjectName" slot="advanced" />
        <!--        <f-search-form-item label="项目&#45;&#45;无此字段" name="packageNo"/>-->
        <f-search-form-item label="区域" name="materialArea" slot="advanced" />
        <f-search-form-item label="系统" name="materialUse" slot="advanced" />
        <f-search-form-item label="历史版本" name="packageNo" slot="advanced" />
        <f-search-form-item label="履历筛选" name="packageNo" slot="advanced" />
      </f-search-form>
      <f-table ref="table" rowKey="materialPackage100Id" :scroll="{x:3410}" :columns="columns" :exportBtn="false"
               :multiple="ture" :operator="operator" :params="queryParam" :api="api.bmp">
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="$refs.drawer.showDrawer(record)">编辑</a>
            <a-divider type="vertical"/>
          </template>
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <a-menu-item v-if="$auth('table.delete')">
                <a href="javascript:;" @click="$refs.table.del(record)">删除</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </f-table>
      <a-button class="editable-add-btn" @click="handleAdd">
        Add
      </a-button>
      <a-table bordered :data-source="dataSource" :scroll="{x:3410}" :columns="columns">
        <template slot="name" slot-scope="text, record">
          <editable-cell :text="text" @change="onCellChange(record.key, 'projectName', $event)"/>
        </template>
        <template slot="operation" slot-scope="text, record">
          <a-popconfirm
            v-if="dataSource.length"
            title="Sure to delete?"
            @confirm="() => onDelete(record.key)"
          >
            <a href="javascript:;">Delete</a>
          </a-popconfirm>
        </template>
      </a-table>
      <bmp-drawer ref="drawer"></bmp-drawer>
    </a-card>
  </div>
</template>
<script>
  import bmpDrawer from './bmp_drawer.vue'
  import api from './js/api'

  const EditableCell = {
    template: `
      <div class="editable-cell">
        <div v-if="editable" class="editable-cell-input-wrapper">
          <a-input :value="value" @change="handleChange" @pressEnter="check" /><a-icon
            type="check"
            class="editable-cell-icon-check"
            @click="check"
          />
        </div>
        <div v-else class="editable-cell-text-wrapper">
          {{ value || ' ' }}
          <a-icon type="edit" class="editable-cell-icon" @click="edit" />
        </div>
      </div>
    `,
    props: {
      text: String
    },
    data() {
      return {
        value: this.text,
        editable: false
      }
    },
    methods: {
      handleChange(e) {
        const value = e.target.value
        this.value = value
      },
      check() {
        this.editable = false
        this.$emit('change', this.value)
      },
      edit() {
        this.editable = true
      }
    }
  }

  export default {
    name: 'TableList',
    components: {
      bmpDrawer,
      EditableCell
    },
    data() {
      let me = this
      //操作按钮
      let operator = []
      operator.push({
        name: '提交',
        icon: '',
        that: this,
        handler: function(table, that) {
          that.$refs.drawer.showDrawer()
        }
      })
      operator.push({
        name: '修正变更',
        icon: '',
        that: this,
        handler: function(table, that) {
          that.$refs.drawer.showDrawer()
        }
      })
      operator.push({
        name: '追加变更',
        icon: '',
        that: this,
        handler: function(table, that) {
          that.$refs.drawer.showDrawer()
        }
      })
      operator.push({
        name: '下载模板',
        icon: '',
        that: this,
        handler: function(table, that) {
          that.$refs.drawer.showDrawer()
        }
      })
      operator.push({
        name: '导入数据',
        icon: '',
        that: this,
        handler: function(table, that) {
          that.$refs.drawer.showDrawer()
        }
      })
      operator.push({
        name: '转存200',
        icon: '',
        that: this,
        handler: function(table, that) {

        }
      })
      operator.push({
        name: '分承包合同下达',
        icon: '',
        that: this,
        handler: function(table, that) {
          that.$refs.drawer.showDrawer()
        }
      })
      return {
        api: Object.assign(api, this.api),
        //列表初始化查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '序号',
            width: '10',
            align: 'center',
            customRender: (text, record, index) => index + 1
          },
          {
            title: '项目代码',
            width: '100',
            align: 'center',
            dataIndex: 'projectCode'
          },
          {
            title: '项目名称',
            width: '100',
            align: 'center',
            dataIndex: 'projectName'
          },
          {
            title: '工程包名称',
            width: '100',
            align: 'center',
            dataIndex: 'packageName'
          },
          {
            title: '工程包代码',
            width: '100',
            align: 'center',
            dataIndex: 'packageNo'
          },
          {
            title: '专业代码',
            width: '100',
            align: 'center',
            dataIndex: 'majorCode'
          },
          {
            title: '服务代码',
            width: '100',
            align: 'center',
            dataIndex: 'serviceCode'
          },
          {
            title: '服务WBS代码',
            width: '100',
            align: 'center',
            dataIndex: 'serviceWbsCode'
          },
          {
            title: '项目（名称）',
            width: 150,
            align: 'center',
            dataIndex: 'materiaSpecs'
          },
          {
            title: '科目名称',
            width: '100',
            align: 'center',
            dataIndex: 'subjectName'
          },
          {
            title: '层级号',
            width: '100',
            align: 'center',
            dataIndex: 'levelNo'
          },
          {
            title: '分承包发包项目描述',
            width: '100',
            align: 'center',
            dataIndex: 'packageDesc'
          },
          {
            title: '对外合同描述',
            width: '100',
            align: 'center',
            dataIndex: 'contractDesc'
          },
          {
            title: '区域',
            width: '100',
            align: 'center',
            dataIndex: 'materialArea'
          },
          {
            title: '系统',
            width: '100',
            align: 'center',
            dataIndex: 'materialUse'
          },
          {
            title: '100预算成本工程量',
            width: '100',
            align: 'center',
            dataIndex: 'costQuantity100'
          },
          // {
          //   title: '200预算成本工程量',
          //   width: '100',
          //   align: 'center',
          //   dataIndex: 'costQuantity200'
          // },
          // {
          //   title: '有合同安装单价',
          //   width: '100',
          //   align: 'center',
          //   dataIndex: 'contractInstallPrice1'
          // },
          // {
          //   title: '拟合同安装单价',
          //   width: '100',
          //   align: 'center',
          //   dataIndex: 'contractInstallPrice2'
          // },
          // {
          //   title: '合同安装单价',
          //   width: '100',
          //   align: 'center',
          //   dataIndex: 'contractInstallPrice3'
          // },
          // {
          //   title: '有合同其他单价',
          //   width: '100',
          //   align: 'center',
          //   dataIndex: 'contractOtherPrice1'
          // },
          // {
          //   title: '拟合同其他单价',
          //   width: '100',
          //   align: 'center',
          //   dataIndex: 'contractOtherPrice2'
          // },
          {
            title: '合同其他单价',
            width: '100',
            align: 'center',
            dataIndex: 'contractOtherPrice3'
          },
          {
            title: '包商1合同量',
            width: '100',
            align: 'center',
            dataIndex: 'supplierNum1'
          },
          {
            title: '包商2合同量',
            width: '100',
            align: 'center',
            dataIndex: 'supplierNum2'
          },
          {
            title: '包商3合同量',
            width: '100',
            align: 'center',
            dataIndex: 'supplierNum3'
          },
          {
            title: '包商4合同量',
            width: '100',
            align: 'center',
            dataIndex: 'supplierNum4'
          },
          {
            title: '包商5合同量',
            width: '100',
            align: 'center',
            dataIndex: 'supplierNum5'
          },
          {
            title: '包商6合同量',
            width: '100',
            align: 'center',
            dataIndex: 'supplierNum6'
          },
          {
            title: '包商7合同量',
            width: '100',
            align: 'center',
            dataIndex: 'supplierNum7'
          },
          {
            title: '包商8合同量',
            width: '100',
            align: 'center',
            dataIndex: 'supplierNum8'
          },
          {
            title: '包商9合同量',
            width: '100',
            align: 'center',
            dataIndex: 'supplierNum9'
          },
          {
            title: '包商10合同量',
            width: '100',
            align: 'center',
            dataIndex: 'supplierNum10'
          }
          // ,
          // {
          //   title: '添加时间',
          //   width: '100',
          //   align: 'center',
          //   dataIndex: 'createTime'
          // },
          // {
          //   title: '更新时间',
          //   width: '100',
          //   align: 'center',
          //   dataIndex: 'updateTime'
          // }
          // ,
          // {
          //   title: '操作',
          //   width: '100',
          //   align: 'center',
          //   scopedSlots: { customRender: 'action' }
          // }
        ],
        operator: operator,
        dataSource: [
          {
            key: '0',
            projectCode: 'Edward King 0',
            projectName: '32',
            packageName: 'London, Park Lane no. 0'
          },
          {
            key: '1',
            projectCode: 'Edward King 1',
            projectName: '32',
            packageName: 'London, Park Lane no. 1'
          }
        ],
        count: 2
      }
    },
    created() {
    },
    methods: {
      onCellChange(key, dataIndex, value) {
        const dataSource = [...this.dataSource]
        const target = dataSource.find(item => item.key === key)
        if (target) {
          target[dataIndex] = value
          this.dataSource = dataSource
        }
      },
      onDelete(key) {
        const dataSource = [...this.dataSource]
        this.dataSource = dataSource.filter(item => item.key !== key)
      },
      handleAdd() {
        const { count, dataSource } = this
        const newData = {
          key: count,
          projectCode: 'Edward King ' + count,
          projectName: '32',
          packageName: 'London, Park Lane no.' + count
        }
        this.dataSource = [...dataSource, newData]
        this.count = count + 1
      }

    }
  }
</script>
<style>
  /*.editable-cell {*/
  /*position: relative;*/
  /*}*/

  /*.editable-cell-input-wrapper,*/
  /*.editable-cell-text-wrapper {*/
  /*padding-right: 24px;*/
  /*}*/

  /*.editable-cell-text-wrapper {*/
  /*padding: 5px 24px 5px 5px;*/
  /*}*/

  /*.editable-cell-icon,*/
  /*.editable-cell-icon-check {*/
  /*position: absolute;*/
  /*right: 0;*/
  /*width: 20px;*/
  /*cursor: pointer;*/
  /*}*/

  /*.editable-cell-icon {*/
  /*line-height: 18px;*/
  /*display: none;*/
  /*}*/

  /*.editable-cell-icon-check {*/
  /*line-height: 28px;*/
  /*}*/

  /*.editable-cell:hover .editable-cell-icon {*/
  /*display: inline-block;*/
  /*}*/

  /*.editable-cell-icon:hover,*/
  /*.editable-cell-icon-check:hover {*/
  /*color: #108ee9;*/
  /*}*/

  /*.editable-add-btn {*/
  /*margin-bottom: 8px;*/
  /*}*/
</style>